import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd'
import { actionCreators } from './store'
import styles from './style.module.css'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'

class Header extends Component {
  constructor(props) {
    super(props)
    // 设置元素ref，可以操作dom
    this.myRef = React.createRef()
  }
  render() {
    let { name, buttonChangeName, age } = this.props
    return (
      <div>
        {/* a标签每次都要获取dom，link标签只用获取一次 */}
        <Link to="/">点击跳转首页</Link>
        <Link to="/detail">点击跳转详情</Link>
        <Button
          type="primary"
          onClick={() => buttonChangeName(this.myRef.current)}
        >
          点击改变
        </Button>
        <div className={styles.content}>{name}</div>
        <div ref={this.myRef}>年龄：{age}</div>
      </div>
    )
  }
}
// 检查props类型
Header.propTypes = {
  age: PropTypes.number
}
// 为props设置默认值
Header.defaultProps = {
  age: 18
}

const mapStateToProps = state => {
  return {
    // name: state.headerReducer.name
    // 因为state及里面的内容都变成了immutable，所以以这种方式获取
    name: state.getIn(['headerReducer', 'name'])
  }
}

const mapDispathToProps = dispatch => {
  return {
    buttonChangeName(ref) {
      console.log('ref:', ref.innerText)
      dispatch(actionCreators.getname())
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispathToProps
)(Header)
